<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API 接口文档</title>
    
    <!-- jQuery 库 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    
    <!-- Markdown 解析库 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/9.1.6/marked.min.js"></script>
    
    <!-- 代码高亮库 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
    
    <!-- 自定义样式 -->
    <link rel="stylesheet" href="./static/style.css">
</head>
<body>
    <div class="container">
        <!-- 左侧导航栏 -->
        <div class="sidebar">
            <div class="sidebar-header" style="position: relative;">
                <h1>API 接口文档</h1>
                <p>文档浏览</p>
                <button class="refresh-btn" onclick="refreshNavigation()" title="刷新接口列表">🔄 刷新</button>
            </div>
            <div class="select-container">
                <div class="select-group">
                    <label class="select-label">选择模块</label>
                    <select class="select-box" id="moduleSelect" onchange="onModuleChange()">
                        <option value="">请选择模块...</option>
                    </select>
                </div>
                <div class="select-group">
                    <label class="select-label">选择组别</label>
                    <select class="select-box" id="groupSelect" onchange="onGroupChange()">
                        <option value="">请先选择模块...</option>
                    </select>
                </div>
            </div>
            <div class="nav-tree" id="navTree">
                <div class="api-list-empty">请先选择模块和组别</div>
            </div>
        </div>

        <div class="content-container">
            <!-- 文档区 -->
            <div class="dotbox">
                <div class="dotbox-header">
                    <div class="dotbox-title" id="dotboxTitle">请选择一个接口</div>
                </div>
                <div class="dotbox-body" id="dotboxBody">
                    <div class="empty-state">
                        <div class="empty-state-icon">📄</div>
                        <div class="empty-state-text">请从左侧菜单选择一个接口查看文档</div>
                    </div>
                    <div class="markdown-body">
                        <p class="api-file-path"></p>
                        <p class="api-description">接口描述信息</p>
                        
                        <!-- 基本信息 -->
                        <div class="api-basic-info">
                            <h3>基本信息</h3>
                            <ul class="basic-info-list">
                                <li class="basic-info-url"><strong>Url:</strong> <code class="url">/api/path</code></li>
                                <li class="basic-info-method"><strong>Method:</strong> <code class="method">GET</code></li>
                                <li class="basic-info-content-type" style="display:none;"><strong>Content-Type:</strong> <code class="content-type">application/json</code></li>
                                <li class="basic-info-token"><strong>Token:</strong> <span class="token-required">是</span></li>
                            </ul>
                        </div>
                        
                        <!-- 更新日志 -->
                        <div class="api-changelog">
                            <h3>更新日志</h3>
                            <table>
                                <thead>
                                    <tr>
                                        <th>版本</th>
                                        <th>日期</th>
                                        <th>说明</th>
                                    </tr>
                                </thead>
                                <tbody id="changelog-tbody"></tbody>
                            </table>
                        </div>
                        
                        <!-- HTTP头参数 -->
                        <div class="api-headers">
                            <h3>HTTP头参数</h3>
                            <table>
                                <thead>
                                    <tr>
                                        <th>参数</th>
                                        <th>类型</th>
                                        <th>必填</th>
                                        <th>描述</th>
                                        <th>示例</th>
                                    </tr>
                                </thead>
                                <tbody id="headers-tbody"></tbody>
                            </table>
                        </div>
                        
                        <!-- 查询参数 -->
                        <div class="api-query-params">
                            <h3>查询参数</h3>
                            <table>
                                <thead>
                                    <tr>
                                        <th>参数</th>
                                        <th>类型</th>
                                        <th>必填</th>
                                        <th>描述</th>
                                        <th>示例</th>
                                    </tr>
                                </thead>
                                <tbody id="query-params-tbody"></tbody>
                            </table>
                        </div>
                        
                        <!-- 路由参数 -->
                        <div class="api-route-params">
                            <h3>路由参数</h3>
                            <table>
                                <thead>
                                    <tr>
                                        <th>参数</th>
                                        <th>类型</th>
                                        <th>必填</th>
                                        <th>描述</th>
                                        <th>示例</th>
                                    </tr>
                                </thead>
                                <tbody id="route-params-tbody"></tbody>
                            </table>
                        </div>
                        
                        <!-- BODY包体参数 -->
                        <div class="api-body-params">
                            <h3>BODY包体参数</h3>
                            <table>
                                <thead>
                                    <tr>
                                        <th>参数</th>
                                        <th>类型</th>
                                        <th>必填</th>
                                        <th>描述</th>
                                        <th>示例</th>
                                    </tr>
                                </thead>
                                <tbody id="body-params-tbody"></tbody>
                            </table>
                        </div>
                        
                        <!-- 请求OBJECT参数容器 -->
                        <div id="request-object-params-container"></div>
                        
                        <!-- 请求示例 -->
                        <div class="api-request-example">
                            <h3>请求示例</h3>
                            <pre><code id="request-example-code" class="language-bash"></code></pre>
                        </div>
                        
                        <!-- 响应参数 -->
                        <div class="api-response">
                            <h3>响应参数</h3>
                            <table>
                                <thead>
                                    <tr>
                                        <th>参数</th>
                                        <th>类型</th>
                                        <th>必填</th>
                                        <th>描述</th>
                                        <th>示例</th>
                                    </tr>
                                </thead>
                                <tbody id="response-tbody"></tbody>
                            </table>
                        </div>
                        
                        <!-- 响应OBJECT参数容器 -->
                        <div id="response-object-params-container"></div>
                        
                        <!-- 响应示例 -->
                        <div class="api-response-example">
                            <h3>响应示例</h3>
                            <div id="response-example-container"></div>
                        </div>
                        
                        <!-- 错误码 -->
                        <div class="api-error-codes">
                            <h3>错误码</h3>
                            <table>
                                <thead>
                                    <tr>
                                        <th>错误码</th>
                                        <th>说明</th>
                                    </tr>
                                </thead>
                                <tbody id="error-codes-tbody"></tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 调试区 -->
            <div class="debug-container">
                <!-- 调试区头部 -->
                <div class="debug-header">
                    <div class="debug-title">接口调试</div>
                    <button class="debug-send-btn" id="debugSendBtn">
                        <span class="btn-icon">▶</span>
                        <span class="btn-text">发送请求</span>
                    </button>
                </div>
                
                <!-- 调试区内容 -->
                <div class="debug-content">
                    <div class="empty-state" id="debugEmptyPlaceholder">
                        <div class="empty-state-icon">🔧</div>
                        <div class="empty-state-text">请从左侧菜单选择一个接口进行调试</div>
                    </div>
                    
                    <div class="debug-main" id="debugMain" style="display: none;">
                        
                        <!-- 基本信息区 -->
                        <div class="debug-section debug-basic-info">
                            <h3>基本信息</h3>
                            <div class="debug-section-content">
                                <p class="debug-basic-url" id="debugBasicUrl">
                                    <span class="method">GET</span> /api/path
                                </p>
                            </div>
                        </div>
                        
                        <!-- 请求头参数区 -->
                        <div class="debug-section debug-headers">
                            <h3>请求头参数</h3>
                            <div class="debug-section-content">
                                <table class="markdown-body" id="debugHeadersTable">
                                    <thead>
                                        <tr>
                                            <th>参数名</th>
                                            <th>参数值</th>
                                        </tr>
                                    </thead>
                                    <tbody id="debugHeadersTbody">
                                        <tr>
                                            <td>Authorization</td>
                                            <td><input type="text" class="debug-input" placeholder="Bearer token..." value=""></td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        
                        <!-- 请求参数区 -->
                        <div class="debug-section debug-params">
                            <h3>
                                <span id="debugParamsTitle">请求参数</span>
                                <span class="debug-section-tip" id="debugParamsTip"> (可手动编辑)</span>
                            </h3>
                            <div class="debug-section-content">
                                <div class="debug-params-wrapper">
                                    <pre><textarea class="debug-params-editor" id="debugParamsEditor" placeholder="请求参数将根据文档区示例自动生成..."></textarea></pre>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 响应结果区 -->
                        <div class="debug-section debug-response">
                            <h3>
                                响应结果
                                <span class="debug-response-time" id="debugResponseTime" style="display: none;"></span>
                            </h3>
                            <div class="debug-section-content">
                                <!-- 响应状态 -->
                                <div class="debug-response-status" id="debugResponseStatus" style="display: none;">
                                    <span class="debug-status-code" id="debugStatusCode">200</span>
                                    <span class="debug-status-text" id="debugStatusText">OK</span>
                                </div>
                                
                                <!-- 响应头（可折叠） -->
                                <div class="debug-response-headers-container" id="debugResponseHeadersContainer" style="display: none;">
                                    <div class="debug-collapse-header" onclick="toggleDebugResponseHeaders()">
                                        <span class="debug-collapse-icon" id="debugResponseHeadersIcon">▼</span>
                                        <span class="debug-collapse-title">响应头</span>
                                    </div>
                                    <div class="debug-collapse-content" id="debugResponseHeadersContent">
                                        <pre class="debug-response-headers-pre"><code id="debugResponseHeaders"></code></pre>
                                    </div>
                                </div>
                                
                                <!-- 响应体 -->
                                <div class="debug-response-body-container" id="debugResponseBodyContainer" style="display: none;">
                                    <h4 class="debug-response-body-label">响应体</h4>
                                    <pre class="debug-response-body-pre"><code id="debugResponseBody" class="language-json"></code></pre>
                                </div>
                                
                                <!-- 空状态 -->
                                <div class="debug-empty-state" id="debugEmptyState">
                                    <div class="debug-empty-icon">📡</div>
                                    <div class="debug-empty-text">点击"发送请求"按钮查看响应结果</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 自定义脚本 -->
    <script src="./static/script.js"></script>
</body>
</html>
